import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import { Spin, Space } from 'antd';
import { useState } from 'react';
import Excel2JSON from './ToolsForJSON/Excel2JSON';
import JSONFormat from './ToolsForJSON/JSONFormat';
import AppMenu from './PublicComponents/AppMenu';
import './App.css';

const Hello = () => {
  const [currentClickedKey, setCurrentClickedKey] = useState('Excel2JSON');
  const [openKeys, setOpenKeys] = useState(['sub1']);
  const [isLoading, setIsLoading] = useState(false);

  return (
    <div className="Hello">
      {/* 加载中 */}
      {isLoading && (
        <Space size="middle" className="spinSpace">
          <Spin size="large" className="spinLoading" />
        </Space>
      )}
      <AppMenu
        openKeys={openKeys}
        setOpenKeys={setOpenKeys}
        setCurrentClickedKey={setCurrentClickedKey}
      />
      {(() => {
        switch (currentClickedKey) {
          case 'Excel2JSON':
            return <Excel2JSON setIsLoading={setIsLoading} />;
          case 'JSONFormat':
            return <JSONFormat setIsLoading={setIsLoading} />;
          default:
            return <div>123</div>;
        }
      })()}
    </div>
  );
};

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Hello />} />
      </Routes>
    </Router>
  );
}
